<template>
	<view class="contenting">
		<!-- 定位搜索、标题 -->
		<!-- <Search :address="address"></Search> -->
		<view class="content"> 
			<!-- 搜索 -->
			<view class="search-cont">
				<view class="search">
					<view class="search-title" @click="showAdress(address)">
						<text>{{address}}</text>
						<image src="../../static/coen/xiala.svg" mode="" class="search-img"></image>
					</view>
					<image src="../../static/coen/shuxian.svg" mode="" class="search-xian"></image>
					
					<view class="search-content">
						<input class="uni-input" placeholder="你想住哪里..." focus="true" @input="searchInput"/>
					</view>
				</view>
			</view>
		
			<!-- 列表 -->
			<view class="prefer-title">
					<view class="prefer-view">
						<block v-for="(item,index) in titleArr" :key="index">
							<view class="prefer-con" @click="showScreen(item.type)">
								<image :src="item.img" class="prefer-img"></image>
								<text>{{item.title}}</text>
							</view>
						</block>
					</view>
				</block>
			</view>
		 </view> 
		
		
		
		
		
		<!-- 发布委托 -->
		<Preference :address="address"></Preference>
		<!-- 二手房推荐 -->
		<Sechouse :secHouseArr="secHouseArr"></Sechouse>
		<!-- 租房推荐-->
		<Renthouse :rentHouseArr="rentHouseArr"></Renthouse>
	</view>
</template>

<script scoped>
// 引进子组件
import Search from './components/search.vue';
import Preference from './components/preference.vue';
import Sechouse from './components/sechouse.vue';
import Renthouse from './components/renthouse.vue';
// 引入接口
import { listing } from '../../api/api.js';
import { publicing } from '../../api/api.js';
// 引入请求地址
import { getSecHouseUrl } from '../../api/request.js';
// 解构console
var { log } = console;
import { addressdata } from '../../common/list.js';
// 引入vuex的mapstate
import { mapState } from 'vuex';

export default {
	components: { Search, Preference, Sechouse, Renthouse },

	data() {
		return {
			listArr: [],
			// 二手房信息
			secHouseArr: [],
			// 租房信息
			rentHouseArr: [],
			// 当前地址
			address: '',
			addressData: '',
			seaRchdata:'',
			seaRchStr:'',
			
			// 轮播数组
			titleArr: [
					{
						img: require('../../static/inster/ershoufang.png'),
						title: '二手房',
						type:'1'	// 二手房
					},
					{
						img: require('../../static/inster/xiaoqu.png'),
						title: '小区',
						type:'3'	// 小区
					},
					{
						img: require('../../static/inster/zhuFang.png'),
						title: '租房',
						type:'0'	// 租房
					},
					{
						img: require('../../static/inster/chengJiao.png'),
						title: '查成交',
						type:'4'	// 查成交
					}
			],
			type:''
			
		};
	},

	methods: {
		// 获取二手房、租房列表
		preference(address) {
			let data = {
				city: address,
				residentialName:this.seaRchStr
			};
			log("获取二手房、租房列表:"+JSON.stringify(data))
			publicing(getSecHouseUrl, data)
				.then(res => {
					this.listArr = res.data.data;
					if (this.listArr) {
						// 页面初始化会执行preference()方法2次,为避免secHouseArr,rentHouseArr重复添加数据的问题,对数组赋值之前清空数组
						this.secHouseArr = [];
						this.rentHouseArr = [];
						var index = this.listArr.findIndex(item => {
							// 0租房/1二手房
							if (item.housing.housingType == 1) {
								this.secHouseArr.push(item);
								log("获取二手房列表:"+JSON.stringify(this.secHouseArr))
							} else {
								this.rentHouseArr.push(item);
								log("获取租房列表:"+JSON.stringify(this.rentHouseArr))
							}
						});
					} else {
						this.secHouseArr = [];
						this.rentHouseArr = [];
					}
				})
				.catch(err => {
					log(err);
				});
		},
		addRess() {
			addressdata()
				.then(res => {
					// this.address = res.result.ad_info.city
					let sReg = new RegExp('市', 'g'); // 去除""符号的正则
					let strReg = new RegExp('"', 'g'); // 去除""符号的正则
					this.address = JSON.stringify(res.result.ad_info.city)
						.replace(sReg, '')
						.replace(strReg, '');
					this.addressData = this.address;
					// 存储到vuex数据仓库,便于委托页面取
					this.$store.commit('addressmuta', this.address);
					this.preference(this.address);
				})
				.catch(err => {
					log('用户拒绝地位');
					this.address = '南京市';
					this.preference(this.address);
				});
		},
		
		// 重新定位城市
		showAdress(address){
			log("定位城市值:" + address)
			let obj = {
				address:address
			}
			let objStr = JSON.stringify(obj);
			log('跳转重新定位页面的值:' + objStr);
			wx.navigateTo({
				url: 'adress/adress?obj='+objStr
			});
		},
		
		// 刷选列表框
		showScreen(type){
			let obj ={type:type}
			// 路径带数据不能带对象,数组只能是字符串
			let objStr = JSON.stringify(obj);
			
			// 二手房
			if(type == 1){
				wx.navigateTo({
					url: 'screen/sechouceScreen?obj=' + objStr
				});
			}
			
			// 小区
			if(type == 3){
				wx.navigateTo({
					url: 'screen/houceScreen?obj=' + objStr
				});
			}
			
			// 租房
			if(type == 0){
				wx.navigateTo({
					url: 'screen/renthouceScreen?obj=' + objStr
				});
			}
			
			// 查成交
			if(type == 4){
				wx.navigateTo({
					url: 'screen/dealScreen?obj=' + objStr
				});
			}
			
		},
		searchInput(e){
			console.log(e.detail.value)
			this.seaRchStr = e.detail.value
			this.preference(this.address)
		},
	},
	async created() {
		// 定位
		this.addRess();
	},
	computed: {
		...mapState(['addressdata','seaRchdata']),
		getAddress() {
			this.addressData = this.addressdata.addressstr;
			
			// this.seaRchdata = this.seaRchdata.seaRchStr;
			// log("取出的值为："+this.seaRchdata)
		}
	},
	// 侦听器
	watch: {
		
		addressData(newValue, oldValue) {
			this.address = newValue;
			this.preference(this.address);
		}
	},
	
	
	
	
	
	
	
	
	
};
</script>

<style scoped>
.contenting {
	margin: 0 30upx;
	background-color: #ffffff;
}
.is_fixed {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	z-index: 1;
}

/* 搜索 */
.search {
	width: 100%;
	height: 100upx;
	line-height: 100upx;
	display: flex;
	align-items: center;
	border-radius: 20upx;
	background: #f9f9f9;
}
.search-title{
	padding: 0 30upx;
	display: flex;
	align-items: center;
}
.search-title text{
	height: 100upx;
	line-height: 100upx;
	font-size: 30upx;
	color: #666666;
}
.search-content{
	margin-left: 20upx;
	width: 70%;
}
.search input {
	height: 100upx;
	line-height: 100upx;
	width: 100%;
	font-size: 30upx;
	color: #666666;
}
.search-img {
	margin: auto 0 auto 10upx;
	width: 15upx;
	height: 15upx;
	padding-right: 30upx;
}
.search-xian {
	margin-left: -35upx;
	width: 30upx;
	height: 70upx;
}

/* 列表 */
.prefer-title {
	margin: 25upx 0;
	height: 220upx;
	width: 100%;
}
.prefer-view{
	height: 220upx;
	width: 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.prefer-con{
	height: 160upx;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.prefer-con text{
	height: 65upx;
	line-height: 65upx;
	font-size: 25upx;
}
.prefer-img{
	height: 100upx;
	width: 100upx;
}















/* 指示点 */
.instruct-view {
	display: flex;
	justify-content: center;
	align-items: center;
}
.instruct {
	background: #e6e6e6;
	height: 4px;
	width: 15px;
	margin: 0 2px 10px 2px;
	border-radius: 10px;
}
.active {
	background: #fbae22 !important;
}
</style>
